<template>
  <div id="app">
    <div class="header1">
      <div class="logo-container">
        <img src="./assets/jvyoums.jpg" alt="logo" class="logo" />
      </div>
    </div>
    <router-view> </router-view>

    <div class="footer">
      <a
        class="a1"
        href="https://aiqicha.baidu.com/detail/compinfo?pid=44476756023499&rq=ef&pd=ee&from=ps&query=%E4%B8%8A%E6%B5%B7%E5%85%B7%E5%8F%8B%E4%BF%A1%E6%81%AF%E6%8A%80%E6%9C%AF%E6%9C%89%E9%99%90%E5%85%AC%E5%8F%B8"
      >
        <p>上海具友信息技术有限公司</p>
        <p>Copyright © 2023-2053</p>
      </a>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: #fff;
  background-color: #37466d;
}
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  height: 100vh;
}
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  height: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.header1 {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: flex-start; /* 左对齐 */
  height: 8vh;
  text-align: center;
}
.footer {
  color: #fff;
  text-align: center;
  height: 6vh;
  position: fixed;
  bottom: 0;
  width: 100%;
}
.a1 {
  color: #fff;
  display: block;
  height: 100%;
  width: 40vw;
  margin: 0 auto;
  text-decoration: none;
}
.logo-container {
  height: 8vh; /* 与 .header1 的高度一致 */
  display: flex;
  align-items: center; /* 垂直居中 */
  margin-left: 20px; /* 左边距 */
}
.logo {
  height: 6vh;
}
</style>
